<template>
  <div class="cjui-search-form">
    <!-- 普通搜索区 -->
    <div class="cjui-search-form__normal">
      <div class="cjui-search-form__normal-form">
        <el-form :inline="true" v-bind="seniorFormProps">
          <el-form-item v-for="item in normalFields" :key="item.prop" :label="item.label">
            <!-- input -->
            <el-input v-if="item.compType === 'input'" v-model="params[item.prop]" v-bind="item.compProps" />

            <!-- select -->
            <el-select
              v-else-if="item.compType === 'select'"
              v-model="params[item.prop]"
              v-bind="item.compProps"
            >
              <el-option
                v-for="opt in item.options"
                :key="opt[item.optionsValueKey || 'value']" 
                :value="opt[item.optionsValueKey || 'value']" 
                :label="opt[item.optionsLabelKey || 'label']" 
              />
            </el-select>

            <!-- date -->
            <el-date-picker
              v-else-if="['date', 'week', 'month', 'year'].includes(item.compType)"
              v-model="params[item.prop]"
              v-bind="item.compProps"
            />
          </el-form-item>

          <el-form-item v-if="!seniorState.visible">
            <el-button-group>
              <el-button type="primary" round @click="query">
                <cjui-icon icon="ep:search" />
                <span>查询</span>
              </el-button>
              <el-button v-if="showReset" plain round @click="resetNormal">
                <cjui-icon icon="ep:refresh" />
                <span>重置</span>
              </el-button>
            </el-button-group>
          </el-form-item>
        </el-form>
      </div>

      <div v-if="!seniorState.visible && seniorFields.length" class="cjui-search-senior-btn">
        <el-button plain @click="toggleSeniorBox(true)">
          <cjui-icon icon="ep:filter" />
          <span>高级筛选</span>
        </el-button>
      </div>
    </div>

    <!-- Tags区 -->
    <div v-if="!seniorState.visible && tagsState.tags.length" class="cjui-search-form__tags">
      <el-tag v-for="(tag, i) in tagsState.tags" :key="tag.name" closable :type="tag.type" @close="deleteTag(tag, i)">
        {{ tag.name }}
      </el-tag>
    </div>

    <!-- 高级搜索区 -->
    <Transition name="cjui-search-form-senior">
      <div v-if="seniorState.visible" class="cjui-search-form__senior">
        <el-form v-bind="seniorFormProps">
          <el-row :gutter="10">
            <el-col v-for="item in seniorFields" :key="item.prop" :span="item.span || 8">
              <el-form-item :label="item.label">
                <!-- input -->
                <el-input v-if="item.compType === 'input'" v-model="params[item.prop]" v-bind="item.compProps" />

                <!-- select -->
                <el-select
                  v-else-if="item.compType === 'select'"
                  v-model="params[item.prop]"
                  v-bind="item.compProps"
                >
                  <el-option
                    v-for="opt in item.options"
                    :key="opt[item.optionsValueKey || 'value']" 
                    :value="opt[item.optionsValueKey || 'value']" 
                    :label="opt[item.optionsLabelKey || 'label']" 
                  />
                </el-select>

                <!-- date -->
                <el-date-picker
                  v-else-if="['date', 'week', 'month', 'year'].includes(item.compType)"
                  v-model="params[item.prop]"
                  v-bind="item.compProps"
                />

                <!-- radio-group -->
                <el-radio-group
                  v-else-if="item.compType === 'radio-group'"
                  v-model="params[item.prop]"
                  v-bind="item.compProps"
                >
                  <el-radio-button 
                    v-for="opt in item.options" 
                    :key="opt[item.optionsValueKey || 'value']" 
                    :label="opt[item.optionsLabelKey || 'label']"
                    :value="opt[item.optionsValueKey || 'value']"
                  />
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="cjui-search-form__senior-operation">
          <el-button type="primary" @click="query">
            <cjui-icon icon="ep:search" />
            <span>查询</span>
          </el-button>

          <el-button type="warning" plain @click="reset">
            <cjui-icon icon="ep:refresh" />
            <span>重置</span>
          </el-button>

          <el-button @click="toggleSeniorBox(false)">
            <cjui-icon icon="ep:arrow-up" />
            <span>收起</span>
          </el-button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import { Props } from './types'

defineOptions({
  name: 'CjuiSearchForm'
})

const props = withDefaults(defineProps<Props>(), {
  params: () => ({}),
  fields: () => [],
  seniorFormProps: () => ({}),
  showReset: true
})
const emits = defineEmits<{
  query: [value: any]
}>()

// 组件内部储存初始值，用于重置使用
const paramsClone = {}
props.fields.forEach(el => {
  // eslint-disable-next-line vue/no-mutating-props
  props.params[el.prop] = props.params[el.prop]
  paramsClone[el.prop] = Object.prototype.hasOwnProperty.call(el, 'resetValue') ? el.resetValue : props.params[el.prop]
})

// Fields
const normalFields = computed(() => props.fields.filter(el => !el.inSenior))
const seniorFields = computed(() => props.fields.filter(el => el.inSenior))

// Tags
const tagsState = reactive({
  tags: []
})
function deleteTag(tag: any, i: number) {
  // eslint-disable-next-line vue/no-mutating-props
  props.params[tag.prop] = paramsClone[tag.prop]
  tagsState.tags.splice(i, 1)
  emits('query', props.params)
}

// 高级筛选
const seniorState = reactive({
  visible: false
})
function toggleSeniorBox(visible: boolean) {
  seniorState.visible = visible
}

// 查询
function query() {
  emits('query', props.params)
  tagsState.tags = seniorFields.value.filter(el => props.params[el.prop]).map(el => {
    let labelText = props.params[el.prop]
    if (el.options && el.options.length) {
      const valueFind = el.options.find(opt => opt.value === props.params[el.prop])
      labelText = valueFind ? valueFind.label : labelText
    }
    return {
      prop: el.prop,
      name: `${el.label}：${labelText}`,
      type: 'primary'
    }
  })
  toggleSeniorBox(false)
}

// 重置normal
function resetNormal() {
  normalFields.value.forEach(el => {
    if (el.compProps && el.compProps.onChange && props.params[el.prop] !== paramsClone[el.prop]) {
      // eslint-disable-next-line vue/no-mutating-props
      props.params[el.prop] = paramsClone[el.prop]
      el.compProps.onChange(props.params[el.prop])
    } else {
      // eslint-disable-next-line vue/no-mutating-props
      props.params[el.prop] = paramsClone[el.prop]
    }
  })
  emits('query', props.params)
}

// 重置
function reset() {
  props.fields.forEach(el => {
    if (el.compProps && el.compProps.onChange && props.params[el.prop] !== paramsClone[el.prop]) {
      // eslint-disable-next-line vue/no-mutating-props
      props.params[el.prop] = paramsClone[el.prop]
      el.compProps.onChange(props.params[el.prop])
    } else {
      // eslint-disable-next-line vue/no-mutating-props
      props.params[el.prop] = paramsClone[el.prop]
    }
  })
}
</script>

<style lang="scss">
// 高级搜索展开动画
.cjui-search-form-senior-enter-from {
  opacity: 0;
  transform: scaleY(0);
}
.cjui-search-form-senior-enter-active {
  transition: 
    transform 0.25s ease,
    opacity 0.5s ease;
  transform-origin: 0 0;
}
.cjui-search-form-senior-enter-to {
  opacity: 1;
  transform: scaleY(1);
}

.cjui-search-form {
}

.cjui-search-form__normal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cjui-search-form__normal-form {
  .el-form-item {
    margin-right: var(--sys-body-content-el-margin);
    margin-bottom: 0;
  }
}

.cjui-search-form__tags {
  margin-top: 10px;

  .el-tag + .el-tag {
    margin-left: calc(var(--sys-body-content-el-margin) / 2);
  }
}

.cjui-search-form__senior {
  margin-top: var(--sys-body-content-el-margin);
  padding-bottom: var(--sys-body-content-el-margin);
  border-bottom: 1px solid var(--el-border-color-lighter);

  .el-form-item {
    margin-bottom: var(--sys-body-content-el-margin);
  }

  // radio-group
  .el-radio-group {
    .el-radio-button {
      margin-right: var(--sys-body-content-el-margin);
    }

    .el-radio-button__inner,
    .el-radio-button:first-child .el-radio-button__inner,
    .el-radio-button:last-child .el-radio-button__inner {
      border: 0;
      border-radius: 3px;
    }
  }
}

.cjui-search-form__senior-operation {
  text-align: right;
}
</style>
